<template>
  <div
    v-loading="loading"
    class="app-container"
    style="background: #f4f4f4; padding: 0"
  >
    <!--top--->
    <div class="my-view-top bg-white">
      <el-form label-width="80px" class="operation">
        <select-dump
          ref="IsEmpty"
          is-table
          :is-show-btn="false"
          @search="getTreeContent"
        />
        <div>
          <el-form-item label="查询时间:" class="float-left">
            <el-date-picker
              v-model="queryParams.datatime"
              type="datetimerange"
              :picker-options="pickerOptions"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              align="left"
              @change="pickerOptionsHandle"
            />
          </el-form-item>
          <el-form-item class="search-btn float-left">
            <el-button
              type="primary"
              icon="el-icon-search"
              size="mini"
              class="search-btn-item"
              @click="searchBtn"
            >查询</el-button>
            <el-button
              type="primary"
              icon="el-icon-refresh"
              class="search-btn-item"
              size="mini"
              @click="uploadBtn"
            >刷新</el-button>
          </el-form-item>
        </div>
      </el-form>
      <div class="tab-tit-tip">-使用次数监控表-</div>
      <div class="data-change-echart">
        <div id="myChart" style="height: 250px" />
      </div>
    </div>
    <!--bottom--->
    <div class="my-view-bottom mt10 mb10">
      <el-row :gutter="10">
        <el-col :span="12" :lg="12">
          <div class="my-view-table">
            <smallTable
              :title="tableDataList.title"
              :max-height="maxHeight"
              :maxtable-height="maxtableHeight"
              :header="tableDataList.header"
              :list-data="tableDataList.list"
            />
          </div>
        </el-col>
        <el-col :span="12" :lg="12">
          <div class="my-view-table">
            <smallTable
              :title="userList.title"
              :max-height="maxHeight"
              :maxtable-height="maxtableHeight"
              :header="userList.header"
              :list-data="userList.list"
              @jumpHandle="handleAuditDialog"
            />
          </div>
        </el-col>
      </el-row>
    </div>
    <!-- 表详情弹窗 -->
    <approve-table-dialog
      v-model="dialogTableVisible"
      :item-id.sync="currentTableId"
      @success="getApplyList"
    />
    <!-- 接口详情弹窗 -->
    <approve-api-dialog
      v-model="dialogApiVisible"
      :item-id.sync="currentApiId"
      @success="getApplyList"
    />
  </div>
</template>

<script>
import echarts from 'echarts'
import smallTable from './model/small_table'
import {
  getqueryTable,
  getqueryTableMap
} from '@/api/dataManagement/system/log'
import { listApply } from '@/api/dataManagement/system/apply'
import { setData, filterParams, setTypeListSelect } from '@/utils/zkComm'
import selectDump from './model/selectDump'
import { changeTypeList } from '@/assets/js/fieldTypeList'
import approveTableDialog from '@/views/dataManagement/system/approve/components/approveTableDialog'
import approveApiDialog from '@/views/dataManagement/system/approve/components/approveApiDialog'

export default {
  name: 'MyView',
  components: {
	   	smallTable,
	   	selectDump,
	   	approveTableDialog,
    approveApiDialog
  },
  data() {
    return {
      loading: false,
      maxtableHeight: '281px',
      maxHeight: 382,
      tableDataList: {
        title: '最近使用用户',
        header: [
          { label: '用户名称', props: 'userName' },
          { label: '用户角色', props: 'roleName' },
          { label: '使用时间', props: 'createTime' },
          { label: '使用方式', props: 'logTypeName' }
        ],
        list: []
      },
      userList: {
        title: '待审批申请',
        header: [
          { label: '申请表单', props: 'tableNames', isjump: true },
          { label: '申请用户', props: 'applicant' },
          { label: '使用时间', props: 'createTime' },
          { label: '申请权限', props: 'accessTypeNames' }
        ],
        list: []
      },
      // queryParams:{
      // 	pageNum: 1,
      // 	pageSize: 20,
      // 	tableName:undefined,
      // 	datatime:undefined,
      // 	dirId:undefined,
      // 	startTime:undefined,
      // 	endTime:undefined,
      // 	waitingAduit: 1
      // },
      queryParams: {
        pageNum: 1,
        pageSize: 20,
        tableName: undefined,
        datatime: undefined,
        dirId: undefined,
        startTime: undefined,
        endTime: undefined,
        waitingAduit: 1
      },
      // 接收所属分层的数据
      selectTree: '',
      // 所属分层
      baseList: [],
      // 使用次数
      EchartsList: [],
      pickerOptions: {
        shortcuts: [
          {
            text: '最近一周',
            onClick(picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(
                start.getTime() - 3600 * 1000 * 24 * 7
              )
              picker.$emit('pick', [start, end])
            }
          },
          {
            text: '最近一个月',
            onClick(picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(
                start.getTime() - 3600 * 1000 * 24 * 30
              )
              picker.$emit('pick', [start, end])
            }
          },
          {
            text: '最近三个月',
            onClick(picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(
                start.getTime() - 3600 * 1000 * 24 * 90
              )
              picker.$emit('pick', [start, end])
            }
          }
        ]
      },
      dialogTableVisible: false,
      currentTableId: 0,
      dialogApiVisible: false,
      currentApiId: 0,
      changeTypeList,
      logTypeName: '',
      seriesList: []
    }
  },
  mounted() {
    // this.createEchart()
    this.getqueryTableList()
    this.getApplyList()
    this.getqueryTableMapList()
  },
  methods: {
    resetData(data) {
      const typedata = this.EchartsList.typeData
      var contentList = []
      var typeDataArr = Object.values(typedata)
      var colorList = [
        'e56c18',
        'e5c92f',
        '89a3fd',
        '55bffd',
        '9ad574',
        '4dcdbb',
        '73aefd',
        'ac6eeb',
        'e56570',
        '74579c',
        'e5c28b',
        'e59646',
        '2989e7',
        '30a9e5',
        '15cfe7',
        '37c4a4',
        '7cd386',
        'acdc7f',
        '524989',
        'e4ad74',
        'e17d72',
        'cf6a98',
        'a262c0',
        '657cde'
      ]
      for (var parent in typedata) {
        var idx = typeDataArr.indexOf(typedata[parent])
        contentList.push({
          name: typedata[parent],
          type: 'line',
          itemStyle: {
            color: '#' + colorList[idx]
          },
          data: []
        })
        for (var i = 0; i < data.length; i++) {
          var arr = []
          for (var item in data[i].dataList) {
            if (parent == item && contentList) {
              contentList[contentList.length - 1].data.push(
                data[i].dataList[item]
              )
            }
          }
        }
      }
      this.seriesList = contentList
    },
    createEchart() {
      const that = this
      that.resetData(that.EchartsList.list)
      var setEchart = setData(
        'date',
        'date',
        that.EchartsList.list,
        this
      )
      var typeData = Object.keys(that.EchartsList.typeData).map(function(
        i
      ) {
        return that.EchartsList.typeData[i]
      })
      var myChart = echarts.init(document.getElementById('myChart'))
      var option = {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            // 坐标轴指示器，坐标轴触发有效
            type: 'line' // 默认为直线，可选为：'line' | 'shadow'
          }
        },
        legend: {
          data: typeData || [],
          show: true,
          orient: 'vertical',
          top: 'middle',
          left: '0',
          width: '280'
        },
        grid: {
          left: '280',
          top: '3%',
          right: '26px',
          bottom: '2%',
          containLabel: true
        },
        xAxis: [
          {
            type: 'category',
            data: setEchart.str || []
          }
        ],
        yAxis: [
          {
            type: 'value'
          }
        ],
        series: this.seriesList
        // [
        // 	{
        // 		name: '导出次数1',
        // 		type: 'line',
        // 		itemStyle: {
        // 			color: '#409EFF'
        // 		},
        // 		data: setEchart.num ||[]
        // 	},
        // 		{
        // 		name: '查询次数2',
        // 		type: 'line',
        // 		itemStyle: {
        // 			color: '#67C23A'
        // 		},
        // 		data: setEchart2.num ||[]
        // 	},
        // 	{
        // 		name: '导出次数3',
        // 		type: 'line',
        // 		itemStyle: {
        // 			color: '#409EFF'
        // 		},
        // 		data: setEchart.num ||[]
        // 	},
        // 		{
        // 		name: '查询次数4',
        // 		type: 'line',
        // 		itemStyle: {
        // 			color: '#67C23A'
        // 		},
        // 		data: setEchart2.num ||[]
        // 	},
        // 	{
        // 		name: '导出次数5',
        // 		type: 'line',
        // 		itemStyle: {
        // 			color: '#409EFF'
        // 		},
        // 		data: setEchart.num ||[]
        // 	},
        // 		{
        // 		name: '查询次数6',
        // 		type: 'line',
        // 		itemStyle: {
        // 			color: '#67C23A'
        // 		},
        // 		data: setEchart2.num ||[]
        // 	},{
        // 		name: '导出次数7',
        // 		type: 'line',
        // 		itemStyle: {
        // 			color: '#409EFF'
        // 		},
        // 		data: setEchart.num ||[]
        // 	},
        // 		{
        // 		name: '查询次数8',
        // 		type: 'line',
        // 		itemStyle: {
        // 			color: '#67C23A'
        // 		},
        // 		data: setEchart2.num ||[]
        // 	}
        // 	,{
        // 		name: '导出次数9',
        // 		type: 'line',
        // 		itemStyle: {
        // 			color: '#409EFF'
        // 		},
        // 		data: setEchart.num ||[]
        // 	},
        // 		{
        // 		name: '查询次数10',
        // 		type: 'line',
        // 		itemStyle: {
        // 			color: '#67C23A'
        // 		},
        // 		data: setEchart2.num ||[]
        // 	}
        // 	,{
        // 		name: '导出次数11',
        // 		type: 'line',
        // 		itemStyle: {
        // 			color: '#409EFF'
        // 		},
        // 		data: setEchart.num ||[]
        // 	},
        // 		{
        // 		name: '查询次数12',
        // 		type: 'line',
        // 		itemStyle: {
        // 			color: '#67C23A'
        // 		},
        // 		data: setEchart2.num ||[]
        // 	},
        // 	{
        // 		name: '导出次数13',
        // 		type: 'line',
        // 		itemStyle: {
        // 			color: '#409EFF'
        // 		},
        // 		data: setEchart.num ||[]
        // 	},
        // 		{
        // 		name: '查询次数14',
        // 		type: 'line',
        // 		itemStyle: {
        // 			color: '#67C23A'
        // 		},
        // 		data: setEchart2.num ||[]
        // 	},
        // 	{
        // 		name: '导出次数15',
        // 		type: 'line',
        // 		itemStyle: {
        // 			color: '#409EFF'
        // 		},
        // 		data: setEchart.num ||[]
        // 	},
        // 		{
        // 		name: '查询次数16',
        // 		type: 'line',
        // 		itemStyle: {
        // 			color: '#67C23A'
        // 		},
        // 		data: setEchart2.num ||[]
        // 	},
        // 	{
        // 		name: '导出次数17',
        // 		type: 'line',
        // 		itemStyle: {
        // 			color: '#409EFF'
        // 		},
        // 		data: setEchart.num ||[]
        // 	},
        // 		{
        // 		name: '查询次数18',
        // 		type: 'line',
        // 		itemStyle: {
        // 			color: '#67C23A'
        // 		},
        // 		data: setEchart2.num ||[]
        // 	},
        // 	{
        // 		name: '导出次数19',
        // 		type: 'line',
        // 		itemStyle: {
        // 			color: '#409EFF'
        // 		},
        // 		data: setEchart.num ||[]
        // 	},
        // 		{
        // 		name: '查询次数20',
        // 		type: 'line',
        // 		itemStyle: {
        // 			color: '#67C23A'
        // 		},
        // 		data: setEchart2.num ||[]
        // 	},
        // ]
      }
      option && myChart.setOption(option)
      window.onresize = myChart.resize
    },
    // 获取最近使用用户
    getqueryTableList() {
      getqueryTable().then(res => {
        this.tableDataList.list = res.data
      })
    },
    handleAuditDialog(data) {
      if (data.applyType == 1) {
        this.currentTableId = data.id
        this.dialogTableVisible = true
      } else {
        this.currentApiId = data.id
        this.dialogApiVisible = true
      }
    },
    jumpHandle(row) {
      this.$router.push('/DMS/dataOverView/monitor/details?id=' + row.id)
    },
    // 待审核列表
    getApplyList() {
      var queryParams = filterParams(this.queryParams, ['datatime'])
      queryParams.showAccessTypeName = true
      if (this.selectTree && this.selectTree.item.dirName) {
        queryParams.tableName = undefined
        queryParams.dirId = undefined
      }
      listApply(queryParams).then(res => {
        var data = res.data.records
        for (var i = 0; i < data.length; i++) {
          data[i].status = setTypeListSelect(data[i].status, '')
        }
        this.userList.list = data
      })
    },
    getqueryTableMapList() {
      var queryParams = filterParams(this.queryParams, ['datatime'])
      if (this.selectTree && this.selectTree.item.dirName) {
        queryParams.tableName = undefined
      }
      getqueryTableMap(queryParams).then(res => {
        this.EchartsList = res.data
        console.log(res,'this.EchartsList')
        this.createEchart()
      })
    },
    getTreeContent(row) {
      console.log(row, 'getTreeContent')
      this.selectTree = row
      this.queryParams.tableName = row.item.value;
      (this.queryParams.dirId = row.dirId),
      (this.queryParams.tableId = row.item.id)
    },
    pickerOptionsHandle(data) {
      var startTime = this.parseTime(
        new Date(data[0]),
        '{y}-{m}-{d} {h}:{i}:{s}'
      )
      var endTime = this.parseTime(
        new Date(data[1]),
        '{y}-{m}-{d} {h}:{i}:{s}'
      )
      this.queryParams.startTime = startTime
      this.queryParams.endTime = endTime
    },
    searchBtn() {
      this.getqueryTableList()
      this.getApplyList()
      this.getqueryTableMapList()
    },
    uploadBtn() {
      this.$refs.IsEmpty.empty(true)
      this.queryParams = {
        pageNum: 1,
        pageSize: 20,
        tableName: undefined,
        datatime: undefined,
        dirId: undefined,
        startTime: undefined,
        endTime: undefined
      }
      this.getqueryTableMapList()
    },
    handleSelect(item) {
      this.queryParams.tableName = item.value
    }
  }
}
</script>
<style type="scss" lang="scss" scoped>
@import "@/assets/styles/system/common.scss";
.left {
  float: left;
}
.right {
  float: right;
}
.tit {
  border-bottom: 1px solid #e6e6e6;
  padding: 19px 0 14px 0;
}
.search-btn {
  padding-left: 10px;
}
.tit-tip {
  padding-top: 16px;
  display: flex;
  align-items: center;
  .tit-tip-tit {
    font-size: 18px;
  }
  .tit-tip-num {
    font-size: 30px;
    font-weight: bold;
  }
}
.model-small {
  width: 514px;
  height: 185px;
  padding: 0 20px;
}
.my-view-top {
  padding: 20px 20px 0 20px;
}
.operation ::v-deep {
  overflow: hidden;
  .el-form-item {
    margin: 0 0 20px 0;
  }
  .associa-select {
    padding-right: 10px;
  }
}
</style>
